<template>
	<el-dialog
		v-if="showCustomeDialog"
		class="custome-dialog"
		width="65%"
		append-to-body
	  destroy-on-close
		:title="title"
    @close="handleClosed"
		@closed="handleClosed"
		style="--el-dialog-body-bg: #F5F5F5;"
	>
		<template v-slot:header>
			<div class="my-header" v-show="!Loading">
				<p style="padding: 10px; font-size: 18px" v-show="!showCustome">{{ title }}</p>
				<component
					:key="dialogKey"
					v-if="customeHeader"
					v-show="showCustome"
					:is="typeCommon[customeHeader.type || 'CardOne']"
					v-bind="customeHeader"
					:whickComm="whickComm"
          :pageName="pageName"
					:model="model"
					@change="showCustome = !showCustome"
					
				></component>
			</div>
		</template>
		<div class="dialog-body-content">
      <slot></slot>
    </div>
	</el-dialog>
	<el-dialog v-else :title="title" append-to-body destroy-on-close>
		<slot></slot>
	</el-dialog>
</template>

<script setup lang="ts">
import CardOne from './components/Card1.vue'
import CardTwo from './components/Card2.vue'
import { useCommonStore } from '@/stores/common'
import bus from '@/utils/eventbus'
const {setDetailHeadData} = useCommonStore()
const { Loading,detailHeadData } = storeToRefs(useCommonStore())

type customeHeaderType = {
	type: string
	title?: string
	avatar?: string
	tipList?: Object[]
	tagList?: Object[]
	menuBtn?: Object[]
}
const props = defineProps<{
	customeHeader?: customeHeaderType
	model?: any
	title?: string
	whickComm?: string
	pageName?: string
}>()
const showCustome = ref(true)
const typeCommon = {
	CardOne,
	CardTwo,
}

let dialogKey = ref(0)

watch(()=>props.model,(value,oldValue)=>{
	// dialogKey.value = Math.random()
},{immediate:true,deep:true})

const showCustomeDialog = computed(() => {
	return props.customeHeader && ['Archives', 'detail'].includes(props.whickComm) ||false
})

const handleClosed = () => {
	showCustome.value = true
  setDetailHeadData({})
}

onUnmounted(() => {
	bus.off('menu-operate')
})
</script>

<style scoped lang="scss">
.my-header {
	border-radius: 12px;
}
</style>
